﻿@model IEnumerable<Marbale.BusinessObject.DisplayGroupModel>
@{
    ViewBag.Title = "Display Group";
}
<table id="marbleTable" class="stripe row-border order-column" style="width: 100%">
    <thead>
        <th>ID</th>
        <th></th>
        <th>DisplayGroup</th>
        <th>Description</th>
        <th>Sort Order</th>
        <th>Last Updated By</th>
        <th>Last Updated Date</th>
    </thead>
    @foreach (var item in @Model)
    {  
        <tr>
            <td>@item.Id  </td>
            <td><a class="delete" title="Delete" data-toggle="tooltip" onclick="DeleteDisplayGroup('@item.Id')">
                <i class="material-icons" style="cursor: pointer;">&#xE872;</i>
            </a></td>
            <td>
                <input type="text" value="@item.DisplayGroup"/>
            </td>

            <td>
                <input type="text" value="@item.Description"/>
            </td>
            <td>
                <input type="text" value="@item.SortOrder"/>
            </td>

            <td>
                <input type="text" value="@item.LastUpdatedBy" disabled/>
            </td>
            <td>
                <input type="text" value="@item.LastUpdatedDate" disabled/>
            </td>
        </tr>  
    }
</table>


<div class="action">
    <button class="btn btn-primary btn-md" role="button" id="SaveDisplayGroup" onclick="SaveDisplayGroup()" disabled>Save</button>
    <button id="addRow" class="btn btn-primary btn-md" role="button">Add Product Category</button>

    <button class="btn btn-primary btn-md" role="button" onclick="history.back();" id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/Marble/index'">Close</button>
</div>
<script>

    var updatedArray = [];
    function UpdatedList(index) {
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }

    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            }
        });
        $('#addRow').on('click', function () {
            $('#SaveDisplayGroup').removeAttr('disabled');

            table.row.add([
                '<a href="#"></a>', '',
                '<input type="text" value="" />',
            '<input type="text" value="" />',
             '<input type="number" value="" />',
              '<input type="text" value="" disabled/>',
               '<input type="text" value=""disabled />',

            ]).draw(false);

        });
        $(".tblRow").on("change", function (e) {
            $('#SaveDisplayGroup').removeAttr('disabled');
            UpdatedList($(this).parent().index());
        });
    });

    function DeleteDisplayGroup(id) {
        if (confirm('Are you sure you want to delete this from database?')) {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("DeleteDisplayGroup", "Product")',
                data: { Id: id },
                dataType: "json",
                success: function (data) {
                    location.reload();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }

    }


    function SaveDisplayGroup() {
        if (updatedArray.length > 0) {
            var productDispalyGroup = [];
            var table = document.getElementById('marbleTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                var rowIndex = r + 1;

                if (updatedArray.includes(r)) {

                    productDispalyGroup.push({
                        Id: table.rows[rowIndex].cells[0].innerHTML,
                        DisplayGroup: table.rows[rowIndex].cells[2].children[0].value,
                        Description: table.rows[rowIndex].cells[3].children[0].value,
                        SortOrder: table.rows[rowIndex].cells[4].children[0].value,
                    });
                }
            }
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("UpdateProductDispalyGroup", "Product")',
                data: JSON.stringify({ model: productDispalyGroup }),
                dataType: "json",
                success: function (data) {
                    alert('Data Saved');
                    location.reload();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }
    }
</script>
